<template>
  <div class="planning-overview-wrapper">
    <div class="top">
      <div class="top-left">
        <div class="title">国土空间规划</div>
        <div class="top-left-part">
          <tabItem :config="ghmjTab" />
          <div class="top-left-part-mid">
            <span class="top-left-part-mid-name"
              >空间结构：三区五园五谷</span
            >
            <div class="top-left-part-mid-val">
              <span>区(15-20k㎡)</span>
              <span>园(3-5k㎡)</span>
              <span>谷(约1k㎡)</span>
            </div>
          </div>
          <div class="top-left-part-bottom">
            <div class="top-left-part-bottom-bg"></div>
            <div class="top-left-part-bottom-content">
              <div
                class="top-left-part-bottom-content-item"
                v-for="(item, index) of kjghList"
                :key="index"
              >
                <div
                  class="top-left-part-bottom-content-item-name"
                >
                  <span>
                    {{ item.name }}
                  </span>
                  <span>
                    {{ item.name1 }}
                  </span>
                </div>
                <div
                  class="top-left-part-bottom-content-item-address"
                >
                  【{{ item.address }}】
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="top-left-chart">
          <div class="top-left-chart-main">
            <echartDiv :options="optionTop1" />
          </div>
          <div class="top-left-chart-legend">
            <legendVue
              v-for="(item, index) of qyydgh"
              :key="index"
              :item="item"
              :color="color[index]"
            />
          </div>
        </div>
        <div class="top-left-chart">
          <div class="top-left-chart-main">
            <echartDiv :options="optionTop2" />
          </div>
          <div class="top-left-chart-legend">
            <legendVue
              v-for="(item, index) of zxcqydgh"
              :key="index"
              :item="item"
              :color="color[index]"
            />
          </div>
        </div>
      </div>
      <div class="top-right">
        <div class="title">控制性详细规划</div>
        <div class="top-right-part">
          <tabItem :config="ghmjTab1" />
          <div class="top-right-part-mid">
            <div class="min-title">规划指标</div>
            <div class="top-right-part-mid-content">
              <tabItem1
                v-for="(item, index) of ghzbTabs"
                :key="index"
                :config="item"
              />
            </div>
          </div>
          <div class="top-right-part-bottom">
            <div class="min-title">控规片区</div>
            <div class="top-right-part-bottom-table">
              <table class="table">
                <thead>
                  <tr>
                    <th style="width: 50%">控规片区</th>
                    <th style="width: 50%">面积</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>智造示范区</td>
                    <td>12.3 k㎡</td>
                  </tr>
                  <tr>
                    <td>国际科教城北单元</td>
                    <td>16.86 k㎡</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="top-right-list">
          <div class="min-title">用地规划</div>
          <listItem
            v-for="(item, index) of ydghList"
            :key="index"
            :item="item"
            :max="ydghMax"
          />
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-part">
        <div class="title">交通规划</div>
        <div class="bottom-part-detail">
          <div class="bottom-part-detail-menus">
            <div
              class="bottom-part-detail-menus-item"
              :class="{ active: currentTab === index }"
              v-for="(item, index) of jtghTabs"
              :key="index"
              @click="currentTab = index"
            >
              {{ item }}
            </div>
          </div>
          <div
            class="bottom-part-detail-list"
            v-if="currentTab === 0"
          >
            <tabItem3
              v-for="(item, index) of wbjtData"
              :key="index"
              :config="item"
            />
          </div>
          <div
            class="bottom-part-detail-list"
            v-if="currentTab === 1"
          >
            <div class="min-title">五横</div>
            <detail2 :config="nbjtwhData" />
            <div class="min-title">四纵</div>
            <detail2 :config="nbjtszData" />
          </div>
        </div>
      </div>
      <div class="bottom-part bottom-part1">
        <div class="title">市政、公服规划</div>
        <div class="bottom-part-detail">
          <div class="bottom-part-detail-item">
            <div class="min-title">配套设施规划</div>
            <detail :config="ptssghData" />
          </div>
          <div class="bottom-part-detail-item">
            <div class="min-title">能源保障</div>
            <detail :config="nybzData" />
          </div>
          <div class="bottom-part-detail-item">
            <div class="min-title">载体资源</div>
            <detail1 :config="ztzyData" />
          </div>
        </div>
      </div>
      <div class="bottom-part">
        <div class="title">规划项目</div>
        <div class="bottom-part-tabs">
          <tabItem2
            v-for="(item, index) of ghxmTabs"
            :key="index"
            :bg="
              index === currentTab1
                ? require('@/assets/img/overview/zhgh-bg2.png')
                : require('@/assets/img/overview/zhgh-bg3.png')
            "
            :color="index === currentTab1 ? '#ffffff' : ''"
            :line="
              index === currentTab1
                ? require('@/assets/img/overview/zhgh-line1.png')
                : require('@/assets/img/overview/zhgh-line2.png')
            "
            :config="item"
            :datas="ghmjTabData"
            @change="() => handleChangeProject(index)"
          />
        </div>
        <div class="bottom-part-chart">
          <div class="bottom-part-chart-main">
            <echartDiv :options="optionGhxm" />
          </div>
          <div
            class="bottom-part-chart-legend"
            v-if="currentTab1 === 0"
          >
            <legendVue
              v-for="(item, index) of ghxmData1"
              :key="index"
              :item="item"
              :color="color[index]"
              customWidth="100px"
              unit="平方公里"
            />
          </div>
          <div
            class="bottom-part-chart-legend"
            v-if="currentTab1 === 1"
          >
            <legendVue
              v-for="(item, index) of ghxmData2"
              :key="index"
              :item="item"
              :color="color[index]"
              customWidth="100px"
              unit="平方公里"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echartDiv from '@/components/echart/index'
import legendVue from './legend.vue'
import listItem from './listItem.vue'
import tabItem from './tabItem.vue'
import tabItem1 from './tabItem1.vue'
import tabItem2 from './tabItem2.vue'
import tabItem3 from './tabItem3.vue'
import detail from './detail.vue'
import detail1 from './detail1.vue'
import detail2 from './detail2.vue'
import { queryProject } from '@/api/wisdomPlanningOverview.js'
export default {
  components: {
    echartDiv,
    legendVue,
    listItem,
    tabItem,
    tabItem1,
    tabItem2,
    tabItem3,
    detail,
    detail1,
    detail2
  },
  data() {
    return {
      ghmjTab: {
        label: '规划面积',
        value: '60.4',
        unit: 'k㎡',
        icon: require('@/assets/img/overview/zhgh-top-icon1.png')
      },
      optionTop1: null,
      optionTop2: null,
      color: [
        '#0190C6',
        '#FFD08E',
        '#83B4D4',
        '#38CC93',
        '#699AFA',
        '#80C8FE',
        '#4898D4',
        '#5252E8',
        '#98B897',
        '#D9A254',
        '#F7985E'
      ],
      qyydgh: [
        {
          label: '住宅、商业用地',
          num: 8.26
        },
        {
          label: '工业用地',
          num: 10.05
        },
        {
          label: '公共管理与公共服务 设施用地',
          num: 4.2
        },
        {
          label: '公用设施及道路用地',
          num: 8.09
        },
        {
          label: '绿地及水域',
          num: 4.24
        },
        {
          label: '基本农田',
          num: 9.56
        },
        {
          label: '农林用地',
          num: 16.01
        }
      ],
      zxcqydgh: [
        {
          label: '交通运输用地',
          num: 841.29
        },
        {
          label: '工矿用地',
          num: 818.71
        },
        {
          label: '居住用地',
          num: 586.61
        },
        {
          label: '公共管理与公共服务用地',
          num: 431.65
        },
        {
          label: '绿地与开敞空间用地',
          num: 418.41
        },
        {
          label: '商业服务用地',
          num: 113.64
        },
        {
          label: '其他用地',
          num: 19.5
        },
        {
          label: '留白用地',
          num: 17.38
        },
        {
          label: '公共设施用地',
          num: 16.22
        },
        {
          label: '仓储用地',
          num: 0
        },
        {
          label: '特殊用地',
          num: 0
        }
      ],
      kjghList: [
        {
          name: '消费电子产业园',
          address: '未来e园'
        },
        {
          name: '人工智能机器人',
          name1: '产业园',
          address: '未来智谷'
        },
        {
          name: '精密仪器制造',
          name1: '产业园',
          address: '未来数谷'
        },
        {
          name: '航空航天产业园',
          address: '未来翼谷'
        },
        {
          name: '国际科教园',
          address: '未来网谷'
        }
      ],

      // 控制性详细规划
      ghmjTab1: {
        label: '规划面积',
        value: '29.16',
        unit: 'k㎡',
        icon: require('@/assets/img/overview/zhgh-top-icon1.png')
      },
      ghzbTabs: [
        {
          label: '人口规模',
          value: '25.5',
          unit: '万人',
          icon: require('@/assets/img/overview/zhgh-top-icon2.png')
        },
        {
          label: '用地规模',
          value: '26.86',
          unit: 'k㎡',
          icon: require('@/assets/img/overview/zhgh-top-icon3.png')
        },
        {
          label: '经营性用地',
          value: '12.57',
          unit: 'k㎡',
          icon: require('@/assets/img/overview/zhgh-top-icon4.png')
        }
      ],
      ydghMax: 648.35,
      ydghList: [
        {
          label: '交通设施用地',
          num: 648.35
        },
        {
          label: '一类工业用地',
          num: 631.9
        },
        {
          label: '居住用地',
          num: 379.7
        },
        {
          label: '公共管理与公共服务设施用地',
          num: 366.65
        },
        {
          label: '绿地与广场用地',
          num: 361.73
        },
        {
          label: '非建设用地',
          num: 229.26
        },
        {
          label: '住兼商用地',
          num: 161.91
        },
        {
          label: '商业服务业设施用地',
          num: 84.03
        },
        {
          label: '新型产业用地',
          num: 32.81
        },
        {
          label: '公共设施用地',
          num: 19.13
        }
      ],

      // 交通规划
      jtghTabs: ['外部交通', '内部交通'],
      currentTab: 0,
      wbjtData: [
        {
          icon: require('@/assets/img/overview/zhgh-bottom-icon1.png'),
          values: [
            {
              value: 2,
              unit: '机场'
            }
          ],
          name: ['天府国际机场', '双流机场']
        },
        {
          icon: require('@/assets/img/overview/zhgh-bottom-icon2.png'),
          values: [
            {
              value: 2,
              unit: '高铁+'
            },
            {
              value: 1,
              unit: '国际铁路港'
            }
          ],
          name: ['成达万高铁', '成自高铁', '成都国际铁路港']
        },
        {
          icon: require('@/assets/img/overview/zhgh-bottom-icon3.png'),
          values: [
            {
              value: 3,
              unit: '高速'
            }
          ],
          name: [
            '机场高速',
            '成都第二绕城高速',
            '成都经济区环线高速'
          ]
        },
        {
          icon: require('@/assets/img/overview/zhgh-bottom-icon4.png'),
          values: [
            {
              value: 4,
              unit: '快速'
            }
          ],
          name: [
            '双简快速',
            '成资快速',
            '金简黄快速',
            '淮简快速'
          ]
        },
        {
          icon: require('@/assets/img/overview/zhgh-bottom-icon5.png'),
          values: [
            {
              value: 4,
              unit: '轨道'
            }
          ],
          name: ['18号线', 'S2线', 'S3号线', '13线']
        }
      ],
      nbjtwhData: [
        '北一线',
        '机场北线',
        '公园大道',
        '南三线',
        '三岔一线'
      ],
      nbjtszData: [
        '西一线',
        '绛云大道',
        '东一线',
        '金简仁快速'
      ],

      // 市政、公服规划
      ptssghData: [
        {
          name: '高中',
          value: 1,
          unit: '所'
        },
        {
          name: '初中',
          value: 3,
          unit: '所'
        },
        {
          name: '小学',
          value: 7,
          unit: '所'
        },
        {
          name: '幼儿园',
          value: 16,
          unit: '所'
        },
        {
          name: '综合医院',
          value: 1,
          unit: '座'
        },
        {
          name: '大型运动场',
          value: 2,
          unit: '处'
        },
        {
          name: '中小型运动场',
          value: 2,
          unit: '处'
        }
      ],
      nybzData: [
        {
          name: '变电站',
          value: 4,
          unit: '个'
        },
        {
          name: '变电站高中压调压站',
          value: 5,
          unit: '个'
        },
        {
          name: '给水设施',
          value: 5,
          unit: '个'
        },
        {
          name: '污水设施',
          value: 5,
          unit: '个'
        }
      ],
      ztzyData: [
        {
          name: 'A区',
          detail: ['占地面积84亩', '总建筑面积11.6万㎡']
        },
        {
          name: 'B区',
          detail: ['占地面积357亩', '总建筑面积39万㎡']
        }
      ],

      // 规划项目
      currentTab1: 0,
      ghxmTabs: [
        {
          label: '房建项目',
          detail: [
            {
              name: '项目数',
              value: 'fjxms',
              unit: '个'
            },
            {
              name: '用地面积',
              value: 'fjydmj',
              unit: '平方公里'
            }
          ]
        },
        {
          label: '市政项目',
          detail: [
            {
              name: '项目数',
              value: 'szxms',
              unit: '个'
            },
            {
              name: '用地面积',
              value: 'szydmj',
              unit: '平方公里'
            }
          ]
        }
      ],
      ghmjTabData: {},
      optionGhxm: null,
      ghxmData1: [],
      ghxmData2: []
    }
  },
  mounted() {
    this.getStatistics()
  },
  methods: {
    getStatistics() {
      this.optionTop1 = this.getChartDataPie(
        this.qyydgh,
        '全域',
        '用地规划'
      )
      this.optionTop2 = this.getChartDataPie(
        this.zxcqydgh,
        '中心城区',
        '用地规划'
      )
      queryProject().then((res) => {
        this.ghmjTabData = {
          fjxms: res.data.buildTotal.total,
          fjydmj: res.data.buildTotal.areaTotal,
          szxms: res.data.governTotal.total,
          szydmj: res.data.governTotal.areaTotal
        }
        // res.data.buildTypeTotalList.forEach((element) => {
        //   element.areaTotal = element.areaTotal
        //     ? element.areaTotal * 100
        //     : 0
        // })
        // res.data.governTypeTotalList.forEach((element) => {
        //   element.areaTotal = element.areaTotal * 100
        // })
        this.ghxmData1 = res.data.buildTypeTotalList
        this.ghxmData2 = res.data.governTypeTotalList
        this.handleChangeProject(0)
      })
    },
    getChartDataPie(data, title1, title2) {
      let option = {
        color: this.color,
        title: {
          text: `${title1}\n${title2}`,
          top: 'center',
          left: 'center',
          textStyle: {
            color: '#000000',
            fontSize: 14,
            fontWeight: 400
          }
        },
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        legend: {
          show: false
        },
        tooltip: {
          show: true,
          formatter: '{b}: {d}%'
        },
        series: [
          {
            type: 'pie',
            radius: ['73%', '85%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            z: 10,
            data: [],
            label: {
              show: false,
              color: '#4C565C',
              fontSize: 14,
              formatter: '{d}%'
            },
            labelLine: {
              show: false
            },
            emphasis: {
              labelLine: {
                show: true
              }
            }
          },
          {
            type: 'pie',
            radius: ['61%', '73%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            label: {
              show: false
            },
            data: [],
            labelLine: {
              show: false
            }
          }
        ]
      }
      const seriesData1 = []
      const seriesData2 = []
      for (let index = 0; index < data.length; ++index) {
        const item = data[index]
        seriesData1.push({
          value: item.num,
          name: item.label
        })
        seriesData2.push({
          value: item.num,
          name: item.label,
          itemStyle: {
            opacity: 0.4
          }
        })
      }

      option.series[0].data = seriesData1
      option.series[1].data = seriesData2
      return option
    },
    getChartDataPie1(data, title) {
      let option = {
        color: this.color,
        title: {
          text: title,
          top: 'center',
          left: 'center',
          textStyle: {
            color: '#000000',
            fontSize: 14,
            fontWeight: 400
          }
        },
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        legend: {
          show: false
        },
        tooltip: {
          show: true,
          formatter: '{b}: {d}%'
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '70%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            z: 10,
            data: [],
            label: {
              show: false,
              color: '#4C565C',
              fontSize: 14,
              formatter: '{d}%'
            },
            labelLine: {
              show: false
            },
            emphasis: {
              labelLine: {
                show: true
              }
            }
          },
          {
            type: 'pie',
            radius: ['50%', '60%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            label: {
              show: false
            },
            data: [],
            labelLine: {
              show: false
            }
          }
        ]
      }
      const seriesData1 = []
      const seriesData2 = []
      for (let index = 0; index < data.length; ++index) {
        const item = data[index]
        seriesData1.push({
          value: item.areaTotal,
          name: item.typeName
        })
        seriesData2.push({
          value: item.areaTotal,
          name: item.typeName,
          itemStyle: {
            opacity: 0.4
          }
        })
      }

      option.series[0].data = seriesData1
      option.series[1].data = seriesData2
      return option
    },
    handleChangeProject(index) {
      this.currentTab1 = index
      this.optionGhxm = this.getChartDataPie1(
        index === 0 ? this.ghxmData1 : this.ghxmData2,
        index === 0 ? '房建项目' : '市政项目'
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.planning-overview-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 18px 16px 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  .title {
    width: 100%;
    height: 50px;
    color: #4c565c;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    box-sizing: border-box;
    padding: 0 0 0 35px;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f1f1;
    &::before {
      content: '';
      width: 4px;
      height: 16px;
      background: linear-gradient(180deg, #40ebff, #bcf8ff);
      position: absolute;
      top: calc(50% - 8px);
      left: 24px;
    }
  }
  .min-title {
    font-size: 14px;
    line-height: 14px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
  }
  .top {
    width: 100%;
    height: calc(53% - 9px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    &-left {
      width: calc(59% - 8px);
      height: 100%;
      background: #ffffff;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: flex-start;
      &-part {
        width: 40%;
        height: calc(100% - 50px);
        box-sizing: border-box;
        padding: 10px 20px 20px 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        &-mid {
          width: 100%;
          &-name {
            font-size: 12px;
            line-height: 12px;
            font-weight: 800;
            color: #000000;
          }
          &-val {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            line-height: 12px;
            font-weight: bold;
            color: #000000;
            margin-top: 5px;
          }
        }
        &-bottom {
          width: 100%;
          height: 200px;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          &-bg {
            width: calc(100% - 90px);
            height: 100%;
            background: url('~@/assets/img/overview/zhgh-bg1.png')
              no-repeat;
            background-size: 100% 100%;
          }
          &-content {
            width: 90px;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            &-item {
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: space-between;
              &-name {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                line-height: 12px;
                font-weight: 500;
                color: #000000;
              }
              &-address {
                width: 100%;
                display: flex;
                align-items: flex-start;
                justify-content: center;
                font-size: 12px;
                line-height: 12px;
                font-weight: 400;
                color: #4c565c;
              }
            }
          }
        }
      }
      &-chart {
        width: 30%;
        height: calc(100% - 50px);
        &-main {
          width: 100%;
          height: calc(100% - 225px);
        }
        &-legend {
          width: 100%;
          height: 225px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-start;
          box-sizing: border-box;
          padding: 0 30px 0 10px;
        }
      }
    }
    &-right {
      width: calc(41% - 8px);
      height: 100%;
      background: #ffffff;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: flex-start;
      &-part {
        width: 55%;
        height: calc(100% - 50px);
        box-sizing: border-box;
        padding: 10px 15px 15px 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        &-mid {
          width: 100%;
          &-content {
            width: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-top: 10px;
          }
        }
        &-bottom {
          width: 100%;
          &-table {
            width: 100%;
            box-sizing: border-box;
            margin-top: 10px;
            .table {
              width: 100%;
              border-spacing: 0;
              border: 1px solid #f2f6fb;
              thead {
                background-color: #f2f6fb;
                height: 32px;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #6b767d;
                text-align: left;
                tr {
                  th {
                    &:first-child {
                      padding-left: 20px;
                    }
                  }
                }
              }
              tbody {
                tr {
                  font-size: 12px;
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #4c565c;
                  text-align: left;
                  height: 32px;
                  &:nth-of-type(even) {
                    background-color: #f2f6fb;
                  }
                  td {
                    &:first-child {
                      padding-left: 20px;
                    }
                    &:last-child {
                      font-weight: bold;
                    }
                  }
                }
              }
            }
          }
        }
      }
      &-list {
        width: 45%;
        height: calc(100% - 50px);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 10px 15px 15px 20px;
      }
    }
  }
  .bottom {
    width: 100%;
    height: calc(47% - 9px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    &-part {
      width: calc(33.33% - 10px);
      height: 100%;
      background: #ffffff;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      &-tabs {
        width: 100%;
        height: 114px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0px 10px;
        .gh-tabItem2 {
          width: calc(50% - 0px);
          height: 100%;
        }
      }
      &-chart {
        width: 100%;
        height: calc(100% - 114px - 50px);
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        &-main {
          width: 48%;
          height: 100%;
        }
        &-legend {
          width: 52%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 10px 20px;
        }
      }

      &-detail {
        width: 100%;
        height: calc(100% - 50px);
        box-sizing: border-box;
        padding: 10px 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        &-item {
          width: 100%;
          height: calc(33.33%);
          .min-title {
            margin: 0 0 0 10px;
          }
          .gh-detail {
            width: 100%;
            height: calc(100% - 20px);
          }
          .gh-detail1 {
            width: 100%;
            height: calc(100% - 20px);
          }
        }
        &-menus {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          &-item {
            width: 93px;
            height: 30px;
            background: #f1f1f1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            line-height: 14px;
            font-weight: bold;
            color: #000000;
            cursor: pointer;
            &:first-child {
              border-radius: 4px 0px 0px 4px;
            }
            &:last-child {
              border-radius: 0px 4px 4px 0px;
            }
            &.active {
              background: #497fa3;
              color: #ffffff;
            }
          }
        }
        &-list {
          width: 100%;
          height: calc(100% - 30px);
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-between;
          .gh-tabItem3 {
            height: calc(20% - 1px);
          }
          .min-title {
            margin-left: 10px;
          }
          .gh-detail2 {
            height: calc(100% - 20px);
          }
        }
      }
    }
    &-part1 {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
    }
  }
}
</style>
